<template>
  <div>
    <Top title="找回密码"></Top>
    <div class="content">
      <div class="phone">
        <input v-model="phoneNum" type="text" placeholder="请输入手机号" />
      </div>
      <div class="msg">
        <input v-model="msg" type="text" placeholder="请输入短信验证码" />
        <button :style="btnColor" :disabled="btnClick" @click="sentMsg">
          {{ btnText }}
        </button>
      </div>
      <div class="loginBtn" @click="next">下一步</div>
     
    </div>
  </div>
</template>

<script>
import Top from "@/views/login/top";
import { Toast } from "vant";
import "vant/es/toast/style";
import { selectUser,loginCode} from "@/common/api/login.js";
export default {
  data() {
    return {
      btnText: "发送短信验证码",
      time: 10,
      phoneNum: "13143750426",
      // 输入的验证码
      msg: "",
      btnClick: false,
      btnColor: "background-color: #b0352f;",
      // 接受的验证码
      code: "",
      //   验证规则
      rules: {
        // 手机号验证
        userTel: {
          rule: /^1[123456789]\d{9}$/,
          msg: "手机号不能为空，并且为11位数字",
        },
        // 密码验证
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空，并且要求6到12位",
        },
      },
    };
  },
  methods: {
    sentMsg() {
      if (this.rules.userTel.rule.test(this.phoneNum)) {
        
        let timer = setInterval(() => {
          this.time--;
          this.btnText = `重新发送(${this.time}s)`;
          this.btnClick = true;
          this.btnColor = "background-color: gray;";
        
          if (this.time == 0) {
            clearInterval(timer);
            this.btnText = "发送短信验证码";
            this.btnClick = false;
            this.time = 10;
            this.btnColor = "background-color: #b0352f;";
          }
        }, 1000);

        // 发送请求
        loginCode(this.phoneNum).then((res) => {
          Toast("发送成功");
          this.code = res.data.data.data;
          console.log(this.code);
        });
      } else {
        return Toast(this.rules.userTel.msg);
      }
    },
    // 点击下一步
    next() {
      if (!this.msg) {
        return Toast("请输入验证码");
      }
      if (this.code == this.msg) {
        //下一步找回密码
        // 告诉后端用户的手机号存在吗
        selectUser(this.phoneNum).then(res=>{
          console.log(res);
          if(res.data.code==200){
              this.$router.push({name:'recoverybtn',query:{phoneNum:this.phoneNum}})
          }else{
            Toast(res.data.msg);
          }
        })
        
      } else {
        return Toast("输入验证码有误");
      }
    },
  },
  mounted() {},
  components: {
    Top,
  },
  beforeCreate() {
    // 生成背景颜色
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#f5f5f5");
  },
};
</script>

<style scoped lang='scss'>
input {
  height: 44px;
  font-size: 0.3415rem;
  color: black;
  border: 1px solid #d7d7d7;
  border-radius: 1vw;
  padding: 0 2vw;
  box-sizing: border-box;
}
.content {
  box-sizing: border-box;
  padding: 0.4878rem;
  .phone {
    display: flex;
    margin-bottom: 5vw;
    input {
      width: 100%;
      height: 44px;
    }
  }
  .msg {
    display: flex;
    margin-bottom: 5vw;
    input {
      flex: 1;
    }
    button {
      background-color: #b0352f;
      color: white;
      font-size: 0.3659rem;
      border: none;
      border-radius: 1vw;
      padding: 0 2vw;
    }
  }
  .loginBtn {
    margin-bottom: 5vw;
    width: 100%;
    background-color: #b0352f;
    color: white;
    font-size: 0.4878rem;
    border: none;
    border-radius: 1vw;
    padding: 3vw 0;
  }
  .res {
    font-size: 0.3415rem;
    color: #222;
    display: flex;
    justify-content: space-between;
  }
}
</style>